<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>在线校验身份证号码</title>
	<link rel="stylesheet" href="static/css/bootstrap.css">
</head>
<style>
	.box{
		margin-top:40px; 
	}
</style>

<body>

	<div class="container">

		<div class="well box">

			<form class="form-horizontal">

				<div class="form-group">
					<label for="inputEmail3" class="col-sm-2 control-label">身份证号码</label>
					<div class="col-sm-10">
						<input id="idcode" type="text" class="form-control" required="" placeholder="请输入18位身份证号码">
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="button" class="btn btn-lg btn-block btn-success">查询</button>
					</div>
				</div>

				<div class="form-group has-error">
					<label for="" class="col-sm-2 control-label"></label>
					<div class="col-sm-10 alert" id="message"></div>
				</div>




			</form>

		</div>

		<div>
			<a target="_blank" href="http://shenfenzheng.293.net/?_t_t_t=0.9766452528640315">在线随机生成身份证号码</a>
		</div>

	</div>
	<script src="static/js/jquery.js"></script>
	<script>
		$(function () {

			var isValid = false;
			// 正则校验用户输入
			$("#idcode").on('change', function () {
				var reg = /^([1-9]\d{5})([1-9]\d{3}\d{2}\d{2})(\d{4}|\d{3}[Xx])$/;
				if (!reg.test($(this).val())) {
					showError();
				} else {
					isValid = true;
					$("#message").removeClass('alert-danger').html();
				}
			});

			$(".btn").on('click', function () {
				if (!isValid) {
					showError();
					return;
				}
				var post_data = {};
				post_data.id = $.trim($("#idcode").val());
				if (post_data.id.length != 18) {
					showError();
					return;
				} else {
					$(".form-group").addClass('has-success');
				}
				$.post('index.php', post_data, function (json) {
					if (json.errcode == 0) {
						var html = '<p>户籍所在地:' + json.data.area + '</p>';
						html += '<p>出生年月:' + json.data.birthday + '</p>';
						html += '<p>性别:' + json.data.gender + '</p>';
						html += '<p>顺序码:' + json.data.list + '</p>';
						$("#message").removeClass('alert-danger').addClass('alert-success').html(html);
					} else {
						showError('您输入的身份证号码不合法!!!');
					}
				}, 'json');
			});
		});


		function showError(tips = '请输入18位合法身份证号码！') {
			$("#message").removeClass('alert-success').addClass('alert-danger').html(tips);
		}
	</script>
</body>

</html>